<template>
  <div v-if="isReady">
    <div class="vertical-slign-center">
      <ConfigBar @change="chart.refresh()" />
    </div>
    <el-scrollbar ref="scrollbar" @wheel="handleMouseWheel">
      <ChartContent ref="chart" :data="seriesData" />
    </el-scrollbar>
    <!-- <pre>{{ seriesData }}</pre> -->
    <!-- <pre>{{ config }}</pre> -->
  </div>
  <EmptyStatus v-else />
</template>
<script setup>
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";
import useFlowStore from "@/store/flow.js";
import EmptyStatus from "../../EmptyStatus/index.vue";
import DataResolver from "./DataResolver.js";
import ChartContent from "./ChartContent.vue";
import ConfigBar from "./ConfigBar.vue";

const flowStore = useFlowStore();
const isReady = computed(
  () => flowStore.chartConfig.ratesChart && seriesData.value
);

const dynamicConfig = {
  chartSize: 80,
  chartType: "bar",
  dataGranularity: 2,
  dataInterval: 2,
  dataStep: 2,
  showTotal: true,
  showTotalLine: true,
  showSector: true,
  showSectorLine: true,
  chartStack: true,
  chartEmphasis: true,
  chartFill: false,
  chartPolar: false,
  showConfig: false,
  chartSmooth: true,
  type: "",
  time: "day",
};

const config = computed(() => {
  if (flowStore.chartConfig.ratesChart != null) {
    return flowStore.chartConfig.ratesChart;
  } else {
    return dynamicConfig;
  }
});

const seriesData = computed(() =>
  DataResolver({
    begTime: flowStore.begTimeAirports,
    data: flowStore.rawRateAirports,
    tags: flowStore.tagsAirportItem,
    dataStep: config.value.dataStep,
    // dataType: config.value.type,
    // dataTime: config.value.time,
  })
);

const chart = ref();

const scrollbar = ref();
const handleMouseWheel = (e) => {
  // console.log("handleMouseWheel", e);
  // scrollbar.value.setScrollLeft();
  // e.preventDefault();
  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
  scrollbar.value.setScrollLeft(
    scrollbar.value.wrapRef.scrollLeft - wheelDelta
  );
};

onMounted(() => {
  if (!flowStore.chartConfig.ratesChart) {
    flowStore.chartConfig.ratesChart = JSON.parse(
      JSON.stringify(dynamicConfig)
    );
  }
  window.addEventListener("resize", () => {
    chart.value.refresh();
  });
});
</script>
